<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>提交运维报告</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
  <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>

  <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  <![endif]-->
  <script type="text/javascript" charset="utf-8" th:inline="javascript">
    var ctxPath = /*[[@{/}]]*/'';
  </script>

  <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  <style>
    #editor—wrapper {
      border: 1px solid #ccc;
      width: 1020px;
      z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 400px;}
  </style>

  <script type="text/javascript" charset="utf-8" th:inline="javascript">
    var ctxPath = /*[[@{/}]]*/'';
  </script>
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin"
     style="padding: 5px 5px 0 0;">


  <!--    <div class="layui-form-item layui-form-text">-->

  <div class="layui-content-report" lay-verify="content3">
    <div id="editor—wrapper">
      <div id="toolbar-container"><!-- 工具栏 --></div>
      <div id="editor-container"><!-- 编辑器 --></div>
    </div>
  </div>


  <div class="layui-form-item layui-hide">
    <input type="button" lay-submit lay-filter="LAY-report-front-submit" id="LAY-report-front-submit" value="确认">
  </div>
</div>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
  layui.config({
    base: ctxPath //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['form','layedit'], function () {
    var form = layui.form;
    form.render(); //更新全部
    layui.use(['layedit', 'form'], function () {
      var form = layui.form;
      var layedit = layui.layedit;
      // 图片接口放到建立编辑器前面，否则无效
      // layedit.set({
      //     uploadImage: {
      //         url: ctxPath + 'monitor-feed/uploadconimage', //接口url
      //         type: 'post', //默认post
      //         // headers: {[[${_csrf.headerName}]]: [[${_csrf.token}]]},
      //     }
      //
      // });
      // 设置编辑器
      // layedit.build('content', {
      //     height: 700 //设置编辑器高度
      // });
      // var index = layedit.build('content'); //建立编辑器

    });
  });
</script>
</body>
</html>


<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>

  const { createEditor, createToolbar } = window.wangEditor
  const editorConfig = {
    MENU_CONF: {},
    onChange(editor) {
      const html = editor.getHtml()
      localStorage.setItem("content",html)
      // 也可以同步到 <textarea>
    },
    // onbeforeunload(file){
    //     for (const key in file){
    //         if (Object.hasOwnProperty.call(file,key)){
    //             const element = file[key];
    //             let name = element['name'];
    //             if (name){
    //                 let name = name.replace(/[`~!@#$%^&*()+=|{}':;',\\[\\].<>?~！@#￥%……&*（）——+|{}【】‘；：”“'。，、？]/g,'')
    //             }
    //         }
    //     }
    // }

  }
  editorConfig.MENU_CONF['uploadImage'] = {
    server: 'uploadImage',
    fieldName: 'file',
    allowedFileTypes: ['image/*','image/jpg','image/png','image/jpeg'],
    // uploadImgAccept: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
    async customInsert(res, insertFn) {
      const url = res.data.url
      insertFn(url)
    },
  }

  const editor = createEditor({
    selector: '#editor-container',
    html: '<table style="word-break: break-all; border-width: 1px; border-style: solid; width:100%;">\n' +
            '<tbody>\n' +
            '<tr style="word-break: break-all; border-width: 1px; border-style: solid;"><th colSpan="1" rowSpan="1" width="59.11"></th>\n' +
            '<th style="word-break: break-all; border-width: 1px; border-style: solid;"colSpan="1" rowSpan="1" width="auto">运维报告单</th></tr>\n' +
            '<tr style="word-break: break-all; border-width: 1px; border-style: solid;">\n' +
            '<td style="word-break: break-all; border-width: 1px; border-style: solid;"colSpan="1" rowSpan="1" width="auto"></td>\n' +
            '<td style="word-break: break-all; border-width: 1px; border-style: solid;"colSpan="1" rowSpan="1" width="auto"><br>填写人： &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 所属部门： &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 填写时间：</td>\n' +
            '</tr>\n' +
            '<tr style="word-break: break-all; border-width: 1px; border-style: solid;">\n' +
            '<td style="word-break: break-all; border-width: 1px; border-style: solid;"colSpan="1" rowSpan="1" width="auto">&nbsp; &nbsp; &nbsp;运<br>&nbsp; &nbsp; &nbsp;维<br>&nbsp; &nbsp; &nbsp;报<br>&nbsp; &nbsp; &nbsp;告<br>&nbsp; &nbsp; &nbsp;内<br>&nbsp; &nbsp; &nbsp;容</td>\n' +
            '<td style="word-break: break-all; border-width: 1px; border-style: solid;"colSpan="1" rowSpan="1" width="auto"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>\n' +
            '</tr>\n' +
            '</tbody></table><p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
  })

  const toolbarConfig = {}

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
  })

</script>